import { Button } from "antd";
import { useEffect,useRef } from "react";
import { useNavigate } from "react-router-dom";
const Text4 = ()=>{
    const canvas = useRef(null);
    let ctx = null;
    const navgate = useNavigate();
    useEffect(()=>{
        ctx = canvas.current.getContext('2d');
        const rectangle = new Path2D();
        // ctx.beginPath();
        // // rectangle.rect(100,250,200,200);
        // rectangle.arc(300,300,100,0,Math.PI*2)
        // // rectangle.quadraticCurveTo(300,200,400,300)
        // rectangle.bezierCurveTo(400,200,500,200,500,300)
        // ctx.clip(rectangle);
        // const img = new Image();
        // img.src = '/images/1.jpg';
        // img.onload = ()=>{
        //     ctx.drawImage(img,0,0,ctx.canvas.width,ctx.canvas.height);
        // }
        //获取像素点
        // const imgData = ctx.getImageData(0,0,ctx.canvas.width,ctx.canvas.height);
        // 渲染像素点
        // for(let i = 0;i<imgData.data.length;i+=4){
        //     imgData.data[i] = 255 - imgData.data[i];
        //     imgData.data[i+1] = 255 - imgData.data[i+1];
        //     imgData.data[i+2] = 255 - imgData.data[i+2];
        //     imgData.data[i+3] = 255;
        // }
        // ctx.putImageData(imgData,0,0);
        ctx.translate(300,300);
        // ctx.rotate(-Math.PI/2);
        // ctx.rotate(Math.PI/2);
        ctx.lineTo(120,0);
        ctx.lineTo(140,0);
        ctx.stroke();
        //旋转
    },[])
    return (
        <div>
            <canvas width={600} height={600} ref={canvas}/>
            <Button type="primary" onClick={()=>navgate('/pixi')}>跳转</Button>
        </div>
    )
}
export default Text4;